<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.search {
		// position: absolute;
		// top: 0;
		// bottom: $tabbar-height;
		width: 100%;
		background-color: $bgw;
		min-height: 100%;
		font-size: 1.2rem;
		overflow-y: scroll;
		box-sizing: border-box;
		flex:1;
		background-color: $main-bgc-white;
		
		.list {
			// padding-bottom: 1rem;
			background-color: $main-bgc-gray;
			.item {
				// margin-top: 0.4rem;
				// margin-left: 1rem;
				// margin-right: 1rem;
				padding: 0.8rem 1.6rem;
				background-color: white;
				.flex2 {
					display: flex;
					
					.flex2-left {
						flex: 0 0 90px;
						height: 70px;
						border-radius: 0.6rem;
						overflow: hidden;
						position: relative;
						.tag{
							background-color: #FE280B;
							padding: 0.3rem 0.7rem;
							border-bottom-left-radius: 0.8rem;
							color:white;
							position: absolute;
							right: 0;
							top: 0;
							border: 0.1rem solid white;
							.text{
								font-size: 10px;
								transform: scale(0.8); //缩放0.8倍
								color:white;
							}
						}
					}

					.flex2-right {
						margin-left: 0.8rem;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						
						.title {
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							/* 设置行数 */
							-webkit-box-orient: vertical;
							color: $color0;
							font-size: 1.6rem;
							line-height: 1.2em;
						}

						.desc {
							span {
								color: $color2;

								&.split {
									font-size: 1rem;
								}
							}
						}

						.badgeBox {
							padding-bottom: 0.4rem;
							margin-top: 0.6rem;

							.badge {
								padding: 0.2rem 1rem;
								font-size: 1.2rem;
								background-color: #FFECDC;
								color: #FF6D00;
								border: 0.1rem solid #FF6D00;
								border-radius: 0.3rem;
								box-sizing: border-box;
								overflow: hidden;
							}

							.badge4status {
								padding: 0.2rem 1rem;
								font-size: 1.2rem;
								background-color: #E8E9E9;
								color: #999;
								border: 0.1rem solid #999;
								border-radius: 0.3rem;
								box-sizing: border-box;
								overflow: hidden;
							}
						}
					}
				}
			}
		}
	}
</style>
<template>
	<div class="search">
		<div>
			<van-search
			  v-model="value"
			  show-action
			  placeholder="请输入想要搜索的课程"
			  @search="onSearch"
			>
			  <template #action>
			    <div @click="onSearch">搜索</div>
			  </template>
			</van-search>
		</div>
		<div class="list" v-if="coursePageList&&coursePageList.length>0">
			<div class="item" v-for="item in coursePageList" :key="item.id">
				<div class="flex2">
					<div class="flex2-left" @click="toDetailView(item)">
						<van-image width="90" height="70" fit="cover" :src="item.images"/>
						<div class="tag" v-if="item.type==2">
							<span class="text">线下课</span>
						</div>
					</div>
					<div class="flex2-right">
						<div class="title">{{item.name}}</div>
						<div class="desc">
							<span>共{{item.course_duration}}节课时</span>
							<span class="split margL-l">|</span>
							<span class="margL-l">{{item.visit}}人在学</span></div>
						<div class="badgeBox"><span class="badge">{{$utils.filterCourseType(item.type)}}</span></div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="finished" class="no-data color-s padding-all-m">无此数据</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import SearchBox from '@/components/SearchBox.vue'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "search",
		mixins: [myMixins],
		components: {
			SearchBox
		},
		// watch:{
		// 	tabActive(newVal) {
		// 		console.log("newVal",newVal)
		// 	}
		// },
		data() {
			return {
				coursePageList:'',
				value:'',
				finished:false
			}
		},
		created() {
			const _this = this;
			// this.getCode()
		},
		// destroyed() {
		// 	this.$router.replace('/home')
		// },
		mounted() {
			// document.title = '活动管理'
			// this.courseData = this.$store.state.courseData
			
			// var arr = document.getElementsByClassName("tabBox");
			// window.onscroll = function() {
			// 	//为了保证兼容性，这里取两个值，哪个有值取哪一个
			// 	//scrollTop就是触发滚轮事件时滚轮的高度
			// 	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			// 	if (scrollTop > 120) {
			// 		arr[0].classList.add("navbarwrap");
			// 	} else {
			// 		arr[0].classList.remove("navbarwrap");
			// 	}
			// }
		},
		// destroyed() {
		// 	var arr = document.getElementsByClassName("tabBox");
		// 	window.onscroll = function() {}
		// },
		methods: {
			toDetailView(item) {
				console.log(item)
				if(item.type==2){
					this.$router.push(`/course/detail4xx?id=${item.id}&type=${item.type}&fromView=s`)
				}else{
					this.$router.push(`/course/detail4xs?id=${item.id}&type=${item.type}&fromView=s`)
				}
			},
			onSearch() {
				console.log("onSearch",this.value)
				this.CourseH5Pagelist(this.value)
			},
			onClickLabels(index) {
				this.activeLabel = index
				console.log("onClickLabels", index)
			},
			CourseH5Pagelist(val) {
				const _this = this;
				let params = {
					name:val,
					campus_id: JSON.parse(localStorage.getItem('selectedCampus')).id,
					pageNo:1,
					pageSize:10
				}
				_this.$request.CourseH5Pagelist(params).then(res => {
					_this.coursePageList = res.data.data
					console.log("res.data.totalCount",res.data.totalCount)
					if(res.data.totalCount==0){
						_this.finished = true
					}else{
						_this.finished = false
					}
					// this.carousel = res.data.data
					// this.$store.commit('setCaseList', this.caseList);
				})
			},
		}
	};
</script>
